<nav id="userBar" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
    <span class="quickIcon" id="accountHelpIcon">
        <a href="#/accountHelp" title="Account help"> <img src="icons/help.png" alt="Account help" /> </a>
    </span>

    <div class="bodyAligned barContent">
        <span class="notLoggedIn">
            <span class="textLogo">
                <a href="#/home">SWIMv2 Project </a>
            </span>


            <span id="loginBar" class="right">
                <form id="loginForm" action="#/login" method="POST" class="staticRight">
                    <label>Email:</label> <input type="text" name="email" />
                    <label>Password:</label> <input type="password" name="password" />
                    <input type="submit" value="Login" />
                </form>
            </span>
        </span>
        <span class="loggedIn">
            <span class="textLogo">
                <a href="#/home">SWIMv2</a>
            </span>

            <span class="quickIcon">
                <a href="#/self/messages" title="Inbox"> <img src="icons/message.png" alt="Messages" /> </a>
            </span>

            <span class="quickIcon">
                <a href="#/self/requests" title="Friendship requests"> <img src="icons/user.png" alt="Friendship requests" /> </a>
            </span>

            <span class="quickIcon">
                <a href="#/self/friends" title="My friends"> <img src="icons/friends.png" alt="Friends" /> </a>
            </span>

            <span class="quickIcon">
                <a href="#/help" title="Search for help"> <img src="icons/search.png" alt="Search for help" /> </a>
            </span>

            <span class="hidden quickIcon" id="showProposals">
                <a href="#/skills/proposals" title="Skill proposals"> <img src="icons/feedback.png" alt="Skill proposals" /> </a>
            </span>

            <span id="quickSearch">
                <form name="quickSearchForm">
                    <input type="text" name="skills" value="Quick search" />
                </form>
            </span>

            <span class="right">
                <span class="quickIcon">
                    <a href="#/self"> <img src="icons/home.png" alt="Home" /> </a>
                    <label id="homeLabel"> Home </label>
                </span>
                <span class="noSideMargin quickIcon">
                    <a href="#/logout"> <img src="icons/close.png" alt="Logout" /> </a>
                    <label> Logout </label>
                </span>
            </span>
        </span>
    </div>
</nav>

<div class="body">
    <div id="homePanel">
        <article id="introduction">
            <img id="homeImage" class="left" src="logo.jpg" alt="SWIMv2 Image" />

            <header> SWIMv2 </header>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec porttitor risus. In in convallis justo. Donec nec ante eu tortor tempor dignissim nec at urna. Sed pretium elit massa, ut pellentesque lectus. Aenean eget neque et diam feugiat tempus id sit amet eros. Cras dictum posuere nunc, in mollis purus scelerisque non. Ut sapien augue, porta sit amet pretium tincidunt, blandit a lectus. Nunc ac leo ut diam pellentesque eleifend. Nulla ornare vulputate suscipit. Mauris eu nulla et nisl faucibus venenatis. Nullam ac risus leo, sit amet condimentum justo. Praesent in leo elit, et consectetur lacus. Donec commodo dolor vel risus gravida pharetra non eu justo.
        </article>

        <article id="quickStart">
            <form id="registrationForm" action="#/register" method="POST">
                <header> Register now! It's free! </header>
                <table>
                    <tr> <td> <label>E-mail: </label>   </td> <td> <input type="email" name="email" />       </td> </tr>
                    <tr> <td> <label>Password: </label> </td> <td> <input type="password" name="password" /> </td>
                    <tr> <td> <label>Confirm password: </label> </td> <td> <input type="password" name="cpassword" /> </td> <td> <input type="submit" value="Register" /> </td> </tr>
                </table>
            </form>

            <section>
                <header> <a href="#/help" alt="Search for help">Or seek help now!</a> </header>
            </section>
        </article>
    </div>

    <div id="profilePanel" class="hidden">
        <section id="userHeader">
            <img class="left avatar" src="/self/avatar">
            <span id="toolbar" class="right">
                <a id="kill" href="#/kill" title="Eliminate user" class="hidden">
                    <img src="icons/burn.png" class="medium" />
                </a>
                <a id="promote" href="#/promote" title="Promote to administrator" class="hidden">
                    <img src="icons/promote.png" class="medium" />
                </a>
                <a id="demote" href="#/demote" title="Demote to user" class="hidden">
                    <img src="icons/demote.png" class="medium" />
                </a>
                <a id="removeFriend" href="#/removeFriend" title="Remove friend" class="hidden">
                    <img src="icons/delete.png" class="medium" />
                </a>
                <a id="addFriend" href="#/addFriend" title="Request friendship" class="hidden" >
                    <img src="icons/add.png" class="medium" />
                </a>
                <a id="showFriends" href="#/users/0/friends" title="Show friends">
                    <img  src="icons/friends.png" class="medium" />
                </a>
                <a id="forcePassword" href="#/forcePassword" title="Change user password" class="hidden">
                    <img src="icons/pass.png" class="medium" alt="Change user password" />
                </a>
                <a href="#" title="Edit profile">
                    <img id="editProfile" src="icons/edit.png" alt="Edit profile" class="hidden medium" />
                </a>
                <a href="#" title="Save profile">
                    <img id="saveProfile" src="icons/save.png" alt="Save profile" class="hidden medium" />
                </a>

            </span>
            <header>
                <span class="normal"> Username </span>
                <span class="hidden edit"> <input type="text" name="profileUsername" value="Username" /> </span>
            </header>
            <cite>
                <span class="normal"> Personal description </span>
                <span class="hidden edit"> <input type="text" name="profileDescription" value="Personal description" /> </span>
            </cite>
            <br/>
            <p class="email">
                <span class="normal"> Email </span>
                <span class="hidden edit"> <input type="text" name="profileEmail" value="Email" /> </span>
            </p>
            <span class="hidden edit">
                Avatar upload: (only jpeg)
                <form id="uploadForm" enctype="multipart/form-data" style="display: inline;">
                    <input type="file" name="avatarFile" />
                    <input id="uploadAvatar" type="button" value="Upload" />
                    <input id="deleteAvatar" type="button" value="Delete" />
                </form>
            </span>
        </section>

        <nav id="userTabs">
            <a href="#/self/informations" id="infoLink"> Informations </a>
            <a href="#/self/skills" id="skillLink"> Skills </a>
            <a href="#/self/feedbacks" id="feedbackLink"> Feedbacks </a>
            <a href="#/self/sendMessage" id="sendMessageLink"> Send a message </a>
        </nav>

        <section id="content">
            <section id="information">
                <span class="normal"> </span>
                <span class="hidden edit"> <textarea rows="7" cols="100" name="profileInformation"> </textarea> Max 255 chars. </span>
            </section>

            <section id="skills" class="hidden">
                <span id="addSkill">
                    Skills:
                    <select> </select>
                    <input id="addSkillButton" type="button" value="Add" />
                    <input id="delSkillButton" type="button" value="Delete" />
                </span>
                <div id="proposeSkill" style="margin-top:20px;">
                    <h3> Propose a skill! </h3>
                    <table>
                        <tr> <td> Name: </td> <td> <input type="text" name="proposal" /> </td> <td> (min 5 characters) </td></tr>
                        <tr> <td> Description: </td> <td> <input type="text" name="proposalDescription" /> </td>
                             <td> <input type="button" value="Propose" /> </td> </tr>
                    </table>
                </div>
                <ul style="margin-top: 20px;"> </ul>
            </section>

            <section id="feedbacks" class="hidden">
                <span id="selectSkill">
                    Select a skill to review:
                    <select> </select>
                    <input type="button" value="Show feedbacks" />
                </span>
                <form id="sendFeedbackForm" style="margin-top: 20px;">
                    <h3> Send a feedback! </h3>
                    <textarea rows="6" cols="100" name="comment"></textarea>
                    <div class="right">
                        Rating:
                        <select name="rating">
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                        </select>
                        <br/>
                        <input type="submit" value="Send feedback" />
                    </div>
                </form>
                <ul style="margin-top: 20px;"> </ul>
            </section>

            <section id="sendMessage">
                <form name="sendMessageForm">
                    <input type='hidden' name='recipient' value='' />
                    <textarea rows='6' cols='100' name='text'>Message</textarea>
                    <input type='submit' value='Send' class='right' />
                </form>
            </section>
        </section>
    </div>

    <div id="messagePanel" class="hidden">
        <header>Messages</header>
        <section id="messages">
            <ul></ul>
        </section>
    </div>

    <div id="requestPanel" class="hidden">
        <header>Friendship requests</header>
        <section id="requests">
            <ul></ul>
        </section>
    </div>

    <div id="searchPanel" class="hidden">
        <section id="search">
            <p>
            <h3> What kind of help are you looking for? </h3>
            Here you can search for help within our userbase. The list shows a list of topic skills our users can offer. Click an item do add it to the search list. Use the search box above the list
            to thin out the number of results.
            </p>

            <table>
                <tr>
                    <td>
                        <input type="text" id="skillQuickSearchBox" />
                        <div id="skillList">
                            <ul class="compact">
                            </ul>
                        </div>
                    </td>
                    <td>
                        After selecting items in the box on the left, choose a minimum rating and the submit your search:
                        <form id="searchForm" action="/help" method="GET">
                            <table>
                                <tr>
                                    <td>
                                        <input type="checkbox" name="onlyFriends" /> <label> Only friends </label>
                                    </td>
                                    <td>
                                        Minimum rating:
                                        <select name="rating">
                                            <option value="0">None</option>
                                            <option value="1">1 star</option>
                                            <option value="2">2 stars</option>
                                            <option value="3">3 stars</option>
                                            <option value="4">4 stars</option>
                                            <option value="5">5 stars</option>
                                        </select>
                                    </td>
                                    <td> <input type="submit" value="Search" /> </td>
                            </table>
                        </form>
                    </td>
                </tr>
            </table>
        </section>
        <section id="searchByName">
            <p>
            <h3> Looking for someone in particular? </h3>
            Search users by their names. Insert a part of a name you remember and go:
            </p>
            <input type="text" name="partialUsername" /> <input type="button" value="Search" />
        </section>
    </div>

    <div id="resultPanel" class="hidden">
        <header> Search results </header>
        <section id="users">
            <ul>

            </ul>
        </section>
        <a id="backToSearch" title="Go back to search panel" href="#/help">
            <img src="icons/back.png" alt="Back to search panel" />
        </a>
    </div>

    <div id="proposalsPanel" class="hidden">
        <header> Skill proposals </header>
        <section id="proposals">
            <ul>

            </ul>
        </section>
    </div>

    <div id="accountPanel" class="hidden">
        <header> Account help </header>
        <div>
            <h3> Reset password via e-mail </h3>
            If you forgot your password, please, enter you email address in the box below and click "Reset". We will send you
            an email message containing a new randomly generated password to use:
            <form id="resetViaEmailForm">
                E-mail: <input type="email" name="email" /> <input type="submit" value="Reset" />
            </form>
        </div>
        <div style="margin-top: 40px;">
            <h3> Reset password via username </h3>
            If you forgot your password and you no longer remember which address has been used for registration, you can try
            to reset the account password by entering your exact username:
            <form id="resetViaUsernameForm">
                Username: <input type="text" name="name" /> <input type="submit" value="Reset" />
            </form>
        </div>
        <div id="manualActivation" styel="margin-top: 40px;" class="hidden">
            <h3> Manually activate an account </h3>
            As super user, you can activate accounts manually from the following list:
            <ul>

            </ul>
        </div>
    </div>
</div>